(function () {
    //轮播图获取标签
    var oWrap = document.getElementsByClassName("wrap")[0];
    var oUl = oWrap.getElementsByTagName("ul")[0];
    var oLi = oWrap.getElementsByTagName("li");//为什么换成oUl获取不到 oLi[0] 可以获取到oLi
    var oSp = oWrap.getElementsByTagName("span");
    var oSqPlane = oWrap.getElementsByClassName("squarePlane")[0];
    var oSquare1 = oSqPlane.getElementsByClassName("square")[0];
    var oSquare2 = oSqPlane.getElementsByClassName("square")[1];


    zxy.ajax({
        "url": "http://edu.xqb.ink/api/banner",
        "type": "get",
        "success": function (res) {
            var data = res.data;
            for (var i = 0; i < data.length; i++) {
                oUl.innerHTML += `<li style="background: url(` + data[i].coverimg + `) center top no-repeat; float: left;">
</li> `;
            }
            oLi[0].style.opacity = "1";
            var n = 0;
            var timer = setInterval(auto, 2000);
            window.addEventListener("visibilitychange", function () {//切出当前页面的时候进行判断
                if (document.hidden == true) {
                    clearInterval(timer);
                } else {
                    clearInterval(timer);
                    timer = setInterval(auto, 2000);
                }
            });

            function auto() {
                for (var k = 0; k < data.length; k++) {
                    zxy.manyMove(oLi[k], { "opacity": 0 }, 5);
                    oSp[k].className = "";
                }
                n++;
                if (n > 3) {
                    n = 0;
                }
                oSp[n].className = "active";
                zxy.manyMove(oLi[n], { "opacity": 1 }, 5);//为什么50以上不行 给的接口第二张轮播图和第四张轮播图一样
            }

            oWrap.onmouseover = function () {
                clearInterval(timer);
                oSqPlane.style.display = "block";
            }
            oWrap.onmouseout = function () {
                clearInterval(timer);//每次需要清除定时器，不然会出bug,首次进入的时候正好鼠标在上面，再移出去就会出现bug
                oSqPlane.style.display = "none";
                timer = setInterval(auto, 2000);
            }
            oSquare1.onclick = function () {
                // clearInterval(timer);
                n--;
                if (n < 0) {
                    n = 3;
                }
                for (var k = 0; k < oSp.length; k++) {
                    zxy.manyMove(oLi[k], { "opacity": 0 }, 5);
                    oSp[k].className = "";
                }
                oSp[n].className = "active";
                zxy.manyMove(oLi[n], { "opacity": 1 }, 5);
            }

            oSquare2.onclick = function () {//为什么使用oSquare1不可以
                n++;
                if (n > 3) {
                    n = 0;
                }

                for (var k = 0; k < oSp.length; k++) {
                    zxy.manyMove(oLi[k], { "opacity": 0 }, 5);
                    oSp[k].className = "";
                }
                oSp[n].className = "active";
                zxy.manyMove(oLi[n], { "opacity": 1 }, 5);
            }
            for (var j = 0; j < oSp.length; j++) {//这个放上面的话会导致第一次刷新不出来，无法进行移入事件。
                oSp[j].index = j;
                oSp[j].onclick = function () {
                    for (var l = 0; l < oSp.length; l++) {
                        zxy.manyMove(oLi[l], { "opacity": 0 }, 5);
                        oSp[l].className = "";
                    }
                    this.className = "active";
                    zxy.manyMove(oLi[this.index], { "opacity": 1 }, 5);
                    n = this.index;
                }
            }

        }
    })//为什么点不出来

}




)()